<template>
  <div class="detail">
     <header><span @click="blank">返回</span><section class="title">商品详情页</section></header>
     <img :src="detailObj.pic" alt="">
     <p>{{detailObj.title}}</p>
     <div class="foot">
       <span>价格{{detailObj.price}}</span>
       <span style="background:red;color:#fff">立即购买</span>
     </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      detailObj:{}, // 这是详情页面信息
    }
  },
  created() {
    // this.detailObj = this.$route.query.obj;
    this.detailObj = this.$route.params.obj;
    // console.log(this.detailObj);
  },
  methods: {
    blank(){
      this.$router.go(-1);
    }
  },
}
</script>
<style lang="scss" scoped>
  img{
    width: 100%;
  }
  .detail{
    height: 100%;
  }
  p{
    text-align: center;
  }
  .foot{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    background: #ccc;
  }
  span{
    line-height: 50px;
    width: 50%;
    text-align: center;
  }
  header{
    height: 50px;
    display: flex;
    width: 100%;
    align-items: center;
    background: skyblue;
    span{
      width: 80px;
    }
  }
  .title{
    background: steelblue;
    flex: 1;
    text-align: center;
    line-height: 50px;
  }
</style>
